<template>
  <div class="sandbox-container">
    <iframe ref="sandboxFrame" sandbox="allow-scripts allow-same-origin" frameborder="0"></iframe>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const sandboxFrame = ref(null)
const props = defineProps({
  html: String,
})

onMounted(() => {
  const iframeDoc = sandboxFrame.value.contentDocument || sandboxFrame.value.contentWindow.document

  // 写入HTML内容
  iframeDoc.open()
  iframeDoc.write(props.html)
  iframeDoc.close()
})
</script>

<style>
.sandbox-container {
  width: 100%;
  /* height: 768px; */
  height: 80vh;
}

iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>
